﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>d20 Dice Roller</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- d20 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/css/pagecontrol.css" rel="stylesheet" />
    <script src="/js/pagecontrol.js"></script>
    <script src="/js/dices.js"></script>
    <script src="/js/default.js"></script>
</head>
<body>
    <div class="pagecontrol fragment" id="contentGrid">
        <header aria-label="Header content" role="banner" class="bannerContent">
            <button class="win-backbutton" aria-label="Back" type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">d20 Dice Roller - Text-based</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main" id="diceContent" class="mainContent">
            <div id="d4">
                <div class="text">
                    <label>Roll me </label>
                </div>
                <div class="button">
                    <button id="delD4">-</button>
                </div>
                <div class="input">
                    <input type="text" id="noOfD4" size="5" maxlength="2" value="0" />
                </div>
                <div class="button">
                    <button id="addD4">+</button>
                </div>
                <div class="text">
                    d4 dice(s).
                </div>
                <div class="clear"></div>
            </div>
            <div id="d6">
                <div class="text">
                    <label>Roll me </label>
                </div>
                <div class="button">
                    <button id="delD6">-</button>
                </div>
                <div class="input">
                    <input type="text" id="noOfD6" size="5" maxlength="2" value="0" />
                </div>
                <div class="button">
                    <button id="addD6">+</button>
                </div>
                <div class="text">
                    d6 dice(s).
                </div>
                <div class="clear"></div>
            </div>
            <div id="d8">
                <div class="text">
                    <label>Roll me </label>
                </div>
                <div class="button">
                    <button id="delD8">-</button>
                </div>
                <div class="input">
                    <input type="text" id="noOfD8" size="5" maxlength="2" value="0" />
                </div>
                <div class="button">
                    <button id="addD8">+</button>
                </div>
                <div class="text">
                    d8 dice(s).
                </div>
                <div class="clear"></div>
            </div>
            <div id="d10">
                <div class="text">
                    <label>Roll me </label>
                </div>
                <div class="button">
                    <button id="delD10">-</button>
                </div>
                <div class="input">
                    <input type="text" id="noOfD10" size="5" maxlength="2" value="0" />
                </div>
                <div class="button">
                    <button id="addD10">+</button>
                </div>
                <div class="text">
                    d10 dice(s).
                </div>
                <div class="clear"></div>
            </div>
            <div id="dPercent">
                <div class="text">
                    <label>Roll me </label>
                </div>
                <div class="button">
                    <button id="delDPercent">-</button>
                </div>
                <div class="input">
                    <input type="text" id="noOfDPercent" size="5" maxlength="2" value="0" />
                </div>
                <div class="button">
                    <button id="addDPercent">+</button>
                </div>
                <div class="text">
                    dPercent dice(s).
                </div>
                <div class="clear"></div>
            </div>
            <div id="d12">
                <div class="text">
                    <label>Roll me </label>
                </div>
                <div class="button">
                    <button id="delD12">-</button>
                </div>
                <div class="input">
                    <input type="text" id="noOfD12" size="5" maxlength="2" value="0" />
                </div>
                <div class="button">
                    <button id="addD12">+</button>
                </div>
                <div class="text">
                    d12 dice(s).
                </div>
                <div class="clear"></div>
            </div>
            <div id="d20">
                <div class="text">
                    <label>Roll me </label>
                </div>
                <div class="button">
                    <button id="delD20">-</button>
                </div>
                <div class="input">
                    <input type="text" id="noOfD20" size="5" maxlength="2" value="0" />
                </div>
                <div class="button">
                    <button id="addD20">+</button>
                </div>
                <div class="text">
                    d20 dice(s).
                </div>
                <div class="clear"></div>
            </div>
            <div class="button">
                <button id="roll">Roll dices</button>
            </div>
            <div class="error">
                <span id="error"></span>
            </div>
            <div class="clear"></div>
            <div id="dices"></div>
        </section>
        <section aria-label="Right Content" role="log" class="rightContent">
            <div id="diceRollHistory"></div>
        </section>
    </div>
    <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdHome',label:'Home',icon:'home',
                section:'global',tooltip:'Home page'}">
        </button>
        <hr 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{type:'separator',section:'global'}" />
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdTextBased',label:'Text-based',icon:'list',
                section:'global',tooltip:'Text-based dice roller'}">
        </button>
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdGraphic',label:'Graphic',icon:'placeholder',
                section:'global',tooltip:'Text-based dice roller'}">
        </button>
        <hr 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{type:'separator',section:'global'}" />
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdChangeUI',label:'Toggle',icon:'switch',
                section:'global',tooltip:'Toggle UI style'}">
        </button>
    </div>
</body>
</html>